<template>
  <div class="login">
        <div class="box">
            <img src='../img/logo.png' alt="" class='logo'/>
            <div class="con">
                <div class="left">
                  <img src='../img/tu.png' alt="" class='logo'/>
                </div>
                <div class="right">
                  <h3>宏烨找房后台管理平台</h3>
                  <span>一款让设计更美好的智能AI平台</span>
                  <div class="input">
                    <!-- <div class="icons-list">
                      <UserOutlined />
                    </div> -->
                    <input type="text" placeholder='请输入管理员姓名' v-model="ruleFrom.username"/>
                  </div>
                  <div class="input">
                    <!-- <div class="icons-list">
                      <LockOutlined />
                    </div> -->
                    <input type="text" placeholder='请输入登录密码' v-model="ruleFrom.password"/>
                  </div>
                  <div class="check">
                  <input type="checkbox"/> <span>记住用户名</span>
                  </div>
                  <button @click="login(ruleFrom)">登录</button>
                  <!-- <button @click="login(ruleFrom)">注册</button> -->
                </div>
            </div>
        </div>
      </div>
</template>

<script>
import axios from '../../ulis/request'
// import axios from 'axios'
export default {
    name:'login',
    data() {
        return {
            ruleFrom:{
                username:'',
                password:''
            },
            name:sessionStorage.getItem('name')
        }
    },
    methods:{
        //登录
        login(ruleFrom){
            axios({
                url:'/api/login',
                method:'post',
                data:{
                    username:ruleFrom.username,
                    password:ruleFrom.password
                }
            }).then(res => {
                console.log(res);
                
                if(res.data.code === 1){
                    alert('登录成功')
                    console.log(res);
                    
                    sessionStorage.setItem('token',res.data.token) //将token保存在本地

                    //将数据保存到本地
                    sessionStorage.setItem('name',res.data.datas[0].name)
                    sessionStorage.setItem('username',res.data.datas[0].username)
                    sessionStorage.setItem('url',res.data.datas[0].url)
                    sessionStorage.setItem('shen',res.data.datas[0].shen)
                    
                   
                    
                    this.$router.push('/')
                }else{
                    alert('账号或密码错误')
                }
            })
        },

        //注册
        // register(ruleFrom){
        //     axios({
        //         url:'/api/register',
        //         method:'post',
        //         data:{
        //             username:ruleFrom.username,
        //             password:ruleFrom.password
        //         }
        //     }).then(res => {
        //         if(res.data.code === 1){
        //             alert('注册成功')
        //         }else{
        //             alert('账号或密码错误')
        //         }
        //     })
        // }
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.login {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.login .box {
    width: 100%;
    height: 100%;
}

.login .box .logo {
    width: 100%;
    height: 100%;
}

.con {
    width: 950px;
    height: 530px;
    background-color: white;
    position: fixed;
    top: 18%;
    left: 29%;
    border-radius: 20px;
}

.left {
    width: 50%;
    height: 80%;
    margin-top: 6%;
    margin-left: 2%;
    float: left;
}

.right {
    width: 48%;
    height: 100%;
    float: left;
    margin-top: 45px;
}

h3 {
    font-size: 36px;
    margin-top: 20px;
}

.right span {
    color: #ccc;
    font-size: 18px;
}

.right .input {
    width: 80%;
    height: 50px;
    border-bottom: 1px solid #ccc;
    display: flex;
    margin-top: 25px;
}

.right .input .icons-list {
    width: 50px;
    height: 30px;
    text-align: center;
    margin-top: 7px;
}

.right .input .icons-list svg {
    width: 70%;
    height: 70%;
    color: #5395f6;
}

.right .input input {
    flex: 1;
    border: none;
    outline: none;
}

.right .input input::placeholder {
    font-size: 18px;
}

.right .check {
    width: 80%;
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 15px;
    margin-top: 20px;
}

.right .check input {
    width: 20px;
    height: 20px;
    border: 1px solid #5395f6;
}

.right .check span {
    margin-left: 30px;
    height: 100%;
    line-height: 40px;
}

.right button {
    width: 56%;
    height: 55px;
    border-radius: 30px;
    background-color: #5395f6;
    color: white;
    font-size: 20px;
    border: none;
    margin-top: 20px;
}
</style>